// 弹出框组件
import { defineComponent, watch } from "vue";
import { ElDialog, ElButton } from "element-plus";
import i18n from "@/languages/index";
import "./index.scss";
const { t } = i18n.global;
// 继承element的ElDialog 所有属性
const DialogBox = defineComponent({
	props: {
		title: {
			type: String,
			default: t("dialogbox.title.default")
		},
		width: {
			type: String || Number,
			default: "65vw"
		},
		hideFooter: {
			type: Boolean,
			default: false
		},
		footerLabel: {
			type: Array,
			default: () => {
				return [t("dialogbox.footerLabel.cancel"), t("dialogbox.footerLabel.confirm")];
			}
		},
		// 使用方法v-model:visible={data.show}
		visible: {
			type: Boolean,
			default: false
		},
		// 居中
		center: {
			type: Boolean,
			default: true
		}
	},
	emits: ["close", "confirm", "update:visible"],
	setup(props, { emit, slots, attrs }) {
		// 取消方法
		const close = function () {
			emit("update:visible", false);
			emit("close");
		};
		// 确认方法
		const confirm = function () {
			emit("confirm");
		};
		// 默认操作按钮
		const footerSlot = () => {
			return (
				<div class={"dialog-footer"}>
					{props.footerLabel.map((item, i) => {
						return (
							<ElButton
								type={i == props.footerLabel.length - 1 ? "primary" : ""}
								onClick={() => (i == 0 && props.footerLabel[i] != "下一步" ? close() : confirm())}
							>
								{props.footerLabel[i]}
							</ElButton>
						);
					})}
				</div>
			);
		};
		watch(
			() => props.visible,
			() => {
				data.visible = props.visible;
			}
		);
		const data = reactive({
			visible: props.visible
		});
		const slot = {
			footer: !props.hideFooter ? slots.footer || footerSlot : null,
			title: slots.title
		};
		return () => {
			return (
				// draggable
				<ElDialog
					align-center
					appendToBody
					draggable
					title={props.title}
					width={props.width}
					v-model={data.visible}
					v-slots={slot}
					{...attrs}
					class={props.center ? "dialog-style-center" : ""}
					onClose={() => close()}
				>
					{props.visible ? <>{slots.default?.()}</> : null}
				</ElDialog>
			);
		};
	}
});
export default DialogBox;
